<#include '/admin/header.html' >
<style type="text/css">
	#search_statis{
		margin-top:-3px!important ;
	}
	.tab li{
		border-bottom: 1px solid #ccc;
        margin-right: 0px;
        padding: 0px 10px;
	}
</style>
<div class="admin-main">
	<!-- 搜索框 -->
	<div>
        <!--提示区域  -->
       <!--  <div class="page_explain">
            <ul>
                <li>111</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div> -->
        <!--按钮操作  -->
        <div class="table_control">
            <!-- <div class="table_opera">
                <button type="button" class="layui-btn layui-btn-primary " title="提示" id="explain"><i class="icon iconfont icon-tishi1"></i></button>
            </div> -->
           <!--搜索区域  -->
            <div class="table_search table_search_update" >
            	<select id="year" >
					<option value="0">--全年--</option>
				</select>
				<select id="month">
				</select>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-small" id="search_statis"><i class="layui-icon">&#xe615;</i></button>
            </div>
        </div>
    </div>
	<div class="clear height10"></div>
	
	<!-- 主体 -->
	<div class="input">
		<div style="display: block;" class="goods_input">
		
			<!-- 用户记录当前的tabId -->
			<input type="hidden" id="now_tab_hid" value="1" />
			
			<!-- tab页标题 -->
		<div class="outcont" style="width: 100%">
		  	<div class="contentTab" style="float: left;width:100%">
				<ul class="tab" style="width:1200px;height:40px;">
					<li class="contentTabS" tabid="1"> 下单量 </li>
					<li tabid="2"> 下单商品数量 </li>
					<li tabid="3"> 下单金额 </li>
					<div style="width:58%;height:47px;float:left;border-bottom:1px solid #ccc;"></div>	
				</ul>
			</div>
		
		</div>
			<!-- tab页内容 -->
			<div class="shadowBoxWhite wf100 whiteBox">
				<div class="text">
					<div class="tab-page">
						<!-- 注意  div中不能有数据  这个用来判断是否加载了数据！！！！！！！！！ -->
						<div class="tab-panel" h_url="${ctx}/shop/admin/memberStatistics/order-num-statistics-html.do" tabid="1"></div>
						<div class="tab-panel" style="display:none;" h_url="${ctx}/shop/admin/memberStatistics/goods-num-statistics-html.do" tabid="2"></div>
						<div class="tab-panel" style="display:none;" h_url="${ctx}/shop/admin/memberStatistics/order-price-statistics-html.do" tabid="3"></div>
					</div>
				</div>
			</div>
		</div>
	</div>	
</div>

<script type="text/javascript">
$(function(){
	  //tab选项卡按钮样式
	  $(".tab li").eq(0).css({"border-bottom":"white","border-left":"1px solid #ccc","border-top":"1px solid #ccc","border-right":"1px solid #ccc"})
		$(".tab li").click(function(){
			$this=$(this);
			$this.css({"border-bottom":"white","border-left":"1px solid #ccc","border-top":"1px solid #ccc","border-right":"1px solid #ccc"}).siblings("li").css({"border-top":"white","border-bottom":"1px solid #ccc","border-right":"white","border-left":"white"})
		})

	//初始化下拉菜单中的时间
	var currentYear = new Date().getFullYear();
	var historyYear = currentYear-10;
	var currentmonth = new Date().getMonth();
	currentmonth+=1;
	
	//for循环得到年数
	for(var i=0;i<20;i++){
		//选中当前年
		if(currentYear==historyYear){
			$("#year").append("<option value='"+historyYear+"' selected >"+historyYear+"年</option>" );
		}else{
			$("#year").append("<option value='"+historyYear+"' >"+historyYear+"年</option>" );
		}
		historyYear++;
	}
	
	//for循环得到月份
	for(var i=1;i<=12;i++){
		
		// 选中当前月
		if(currentmonth==i){
			$("#month").append("<option value='"+i+"' selected >"+i+"月</option>" );
		}else{
			$("#month").append("<option value='"+i+"' >"+i+"月</option>" );
		}
	}
	
	//默认加载第一个tab页的数据
	loadTab(1)
	
	// 选项卡 单击事件
	$(".goods_input .contentTab>ul>li").click(function() {
		var tabId = $(this).attr("tabid");
		$(".goods_input .contentTab>ul>li").removeClass("contentTabS");
		$(this).addClass("contentTabS");
		$(".tab-page .tab-panel").hide();
		
		$("#now_tab_hid").val(tabId);	//记录当前tabId
		loadTab(tabId);
	});
	
	// 搜索点击事件
	$("#search_statis").click(function(){
		// 1.获取时间条件
		var dateWhere = getDateWhere();
		
		//如果没有时间条件 就不用刷新
		if(!dateWhere) {
			return;
		}
		
		// 2.记录这个页需要刷新
		$(".now_tab_data_hid").val("1");
		var tabId = $("#now_tab_hid").val();
		
		// 3.刷新数据页面
		refreshTab(tabId, dateWhere[0], dateWhere[1]);
		
		// 4.记录这个页不用刷新
		$(".now_tab_data_hid[tab_id='" + tabId + "']").val("0");
	});
});

/**
 * 获取日期条件
 * @return dateWhere[] 下标0=开始时间  下标1=结束时间
 */
function getDateWhere(){
	
	var c_type = $("#cycle_type").val();
	var startDate, endDate; //开始时间和结束时间
	
	if (c_type == 0) {
		alert("请先选择查询方式!");
		return;
	}
	
	//如果是按照年来筛选订单的
	if(c_type == 2) {
		var year = $("#year").val();
		if(year == 0) {
			var dateWhere = [];
			dateWhere[0] = "";
			dateWhere[1] = "";
			return dateWhere;
		}
		startDate = year + "-01-01 0:0:00";
		endDate = year + "-12-31 23:59:59";
	} else {
		var year = parseInt($("#year").val());
		var month = parseInt($("#month").val());
		if(year == 0) {
			alert("请选择年份");
			return;
		}
		if(month == 0) {
			alert("请选择月份");
			return;
		}
		//得到一个月最后一天
		var lastDate = new Date(year, month, 0);
		var lastDay = lastDate.getDate();
		startDate = year + "-" + month + "-01 0:0:00";
		endDate = year + "-" + month + "-" + lastDay + " 23:59:59";
	}
	var dateWhere = [];
	dateWhere[0] = startDate;
	dateWhere[1] = endDate;
	return dateWhere;
}


/**
 * 根据tabId刷新页面数据
 * @param tabId	tab页的id
 * @param startDate	条件：开始时间
 * @param endDate	条件：结束时间
 */
function refreshTab(tabId, startDate, endDate){
	
	tabId = parseInt(tabId);
	//暂时tabId与函数方式定死  也许还有更好的方法
	switch(tabId) {
	
		case 1:
			getOrderNum(startDate, endDate);
			break;
		case 2:
			getGoodsNum(startDate, endDate);
			break;
		case 3:
			getOrderPrice(startDate, endDate);
			break;
		default:
			getOrderNum(startDate, endDate);
				
	}
	
}


/**
 * 根据tabId加载tab页数据 或者 刷新数据
 * @param tabId	tab页的id
 */
function loadTab(tabId){
	var $tab = $(".tab-panel[tabid=" + tabId + "]");
	if($tab.html() == '') {
		$.ajax({
			url : $tab.attr("h_url"),
			type:'get',
			success:function(data){
				$tab.html(data);
			}
		});
	} else {
		var isRefresh = $(".now_tab_data_hid[tab_id='" + tabId + "']").val();
		if (isRefresh == "1") {
			// 1.获取时间条件
			var dateWhere = getDateWhere();
			
			//如果没有时间条件 就不用刷新
			if(!dateWhere) {
				return;
			}
			
			// 2.刷新数据页面
			refreshTab(tabId, dateWhere[0], dateWhere[1]);
			
			// 3.记录这个页不用刷新
			$(".now_tab_data_hid[tab_id='" + tabId + "']").val("0");
		}
	}
	$tab.show();
}

/**
 * 初始化柱状图
 * @param id	html 初始化div的id
 * @param conf	相关配置
 */
 function initHistogram(conf){
		var myChart = echarts.init(document.getElementById('order_num_statistics'));
		var options = {
				color: ['#3398DB'],
				title: {				//图表上方标题
					x : 'center',
	                text: conf.title
	            },
	            tooltip : {
	                trigger: 'item',			//触发类型
	                formatter : function(params){   //鼠标放到图表上触发提示的内容
	                	var dataname = conf.name[params.dataIndex].name;
	                	return dataname + '<br/>' +params.seriesName + ':' + params.value;
	                }
	 
	            },
	            toolbox: {   //图形右边工具栏
			        show : true,
			        feature : {
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
	            legend : {
	            	bottom : '10',
	            	data : ['下单量']
	            },
	            xAxis : [			//x坐标
	                     {
	                         type : 'category',				//坐标轴类型
	                         data : conf.categories,
	                         min : 0,
	                         nameLocation : 'middle',
	         				 nameGap : '30',
	         				 nameTextStyle : {
	         					fontWeight : 'bold'
	         				 }
	                     }
	                 ],
	            yAxis : [					//y坐标
	                     {
	                         type : 'value',
	                       	 name : '订单量（个）',
	                       	 nameLocation : 'middle',
	                       	 nameGap : '30'
	                     }
	                 ],
	            series : [				//显示图表类型
	                      {
	                         name: '下单量',
	                         type: 'bar',
	                         data: conf.data,
	                         itemStyle: {
	                             normal: {
	                                 label: {			//柱状图形上的文本标签
	                                     show: true,
	                                     position: 'top',
	                                 }
	                             }
	                         }   
	                    }
				]
			};
		myChart.setOption(options);
	}

layui.use('form', function(){
  var form = layui.form();
});
</script>

<#include '/admin/footer.html' >